
import * as Dialog from "@radix-ui/react-dialog"
import styles from "./index.module.scss";
import { X } from "lucide-react"; // 可选图标库，你也可以使用任何图标组件

export default function Drawer({ children, open, onOpenChange, title = '' ,dalogWith = '300px' }) {

  // 调用
  /* <Drawer 
  open={this.state.open} 
  onOpenChange={()=>{
    this.setState({
      open:!this.state.open
    })
  }}
  dalogWith = {'500px'}
  ></Drawer>
  */


  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className={styles.overlay} />
        <Dialog.Content style={{width:dalogWith}} className={styles.content}>
          <div className={styles.header}>
            <Dialog.Title className={styles.title}>{title}</Dialog.Title>
            <Dialog.Close asChild>
              <button className={styles.closeBtn} aria-label="关闭">
                <X size={18} />
              </button>
            </Dialog.Close>
          </div>
          <div className={styles.body}>
            {children || <p>这是抽屉内容。</p>}
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
